<template>
	<div class="arrowsWrap">
		<span class="circle"></span>
		<span class="line"></span>
		<span class="triangle"></span>
		<span class="slot">
			<slot></slot>
		</span>
	</div>
</template>

<script setup name="arrows"></script>

<style lang="less" scoped>
@green: rgba(7, 191, 168, 1);
.arrowsWrap {
	width: 10px;
	height: 84px;
	position: relative;
	.slot {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
.circle {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	top: 0;
	height: 8px;
	width: 8px;
	border-radius: 50%;
	border: 2px solid @green;
	background-color: #fff;
}
.line {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	top: 8px;
	width: 2px;
	height: 70px;
	background-color: @green;
}
.triangle {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	top: 78px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: @green;
}
</style>
